<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<!-- datagrid -->
	<table id="dg"></table>
	<!-- toolbar -->
	<div id="tb">
		<button id="btn1"  class="easyui-linkbutton"
			data-options="iconCls:'icon-edit',plain:true,text: '修改权限'"></button> 
		<button id="btn2"  class="easyui-linkbutton"
			data-options="iconCls:'icon-help',plain:true" onClick="help()"></button>
		<!-- 搜索框 -->
		<input id="search">
		<div id="search-menu">
			<div data-options="name: 'userName',iconCls: 'icon-man'">用户名</div>
		</div>
	</div>
	<!-- 弹出修改权限dialog -->
	<div id="dg1" style="padding: 30px;display: none;">
		<p>1、超级用户，可以查看修改所有模块，同时根据不同的情况可以新增或删除其他用户；</p>
		<p>2、仓库用户，只允许修改产品上线功能模块；</p>
		<p>3、区域用户（加盟商）只能查看当地所管辖的用户量及交易情况明细（商品、金额等）；</p>
		<p>4、财务用户，只允许查看销售明细情况及仓库模块；</p>
		<p>5、监察用户，只允许查看。</p>
		<hr><br>
		<label style="font-size: 20px;"></label><br><br>
		修改权限为： <input id="auth-combobox" name="auth" value="超级管理员">
	</div>
	<div id="dg2" style="padding: 30px;display: none;">
		<p style="font-size: 20px;color: #ff0000;">
			<strong>未选中条目，请选择！</strong>
		</p>
	</div>
	<!-- 弹出帮助框 -->
	<div id="dg3" style="padding: 30px;display: none;">
		电话：8888888
	</div>


	<script type="text/javascript">
		$('#dg').datagrid({
			title : '管理员用户',
			url : 'Data/datagrid.json',
			fit : true,
			checkOnSelect : false,
			fitColumns : true, //设置为 true，则会自动扩大或缩小列的尺寸以适应网格的宽度并且防止水平滚动。
			//singleSelect : true, //设置为 true，则只允许选中一行。
			striped : true, //设置为 true，则在数据网格（datagrid）底部显示分页工具栏。
			pagination : true, //设置为 true，则在数据网格（datagrid）底部显示分页工具栏。
			columns : [ [ {
				field : 'id',
				width : 100,
				checkbox : true
			},{ //查看datagrid列属性
				field : 'name',
				title : '用户名',
				width : 100
			}, {
				field : 'authority',
				title : '权限',
				width : 100
			}, {
				field : 'remark',
				title : '备注',
				width : 100
			} ] ],
			//通过数组定义工具栏
			toolbar : '#tb',
		//通过数组定义工具栏
		// 			toolbar : [ {
		// 				text : '修改权限',
		// 				iconCls : 'icon-edit',
		// 				handler : function() {
		// 					alert('edit')
		// 				}
		// 			}, '-', {
		// 				text : '帮助',
		// 				iconCls : 'icon-help',
		// 				handler : function() {
		// 					alert('help')
		// 				}
		// 			} ]
			/* 
			当用户点击一行时触发，参数包括：
			rowIndex：被点击行的索引，从 0 开始
			rowData：被点击行对应的记录
			*/
			onClickRow : function(rowIndex, rowData){
				//alert(rowData.code);
				$('#dg1').css('display','block');
				$('#dg1 label').html('<strong>'+rowData.name+'：'+rowData.authority+'</strong>');
				$('#auth-combobox').combobox({
					url : 'Data/auth.json',
					valueField : 'id',
					textField : 'text'
				});
				$('#dg1').dialog({	
					title : '修改权限',
					buttons : [ {
						text : '确定',
						iconCls : 'icon-ok',
						handler : function() {//确认框
							$('#dg1').dialog('close');
							$.messager.confirm('Confirm','确认修改么？', function(r) {
								if (r) {
									$.messager.show({
										title : '成功',
										msg : '修改成功',
										timeout : 5000,
										showType : 'slide'
									});
									}else{
										$.messager.show({
											title : '取消',
											msg : '取消修改',
											timeout : 5000,
											showType : 'slide'
										});
									}
								});
						}
					}, {
						text : '取消',
						iconCls : 'icon-no',
						handler : function() {
							$('#dg1').dialog('close');
							$.messager.show({
								title : '取消',
								msg : '取消修改',
								timeout : 5000,
								showType : 'slide'
							});
						}
					} ],
					modal : true
				});
			}
		});
		//Searchbox
		$('#search').searchbox({
			menu : '#search-menu',
			width : 300,
			prompt : '请输入管理员用户名',
			searcher : function(value, name) {
				alert(name + '：' + value);
			}
		});
		//dialog
		$(function() {
			$('#btn1').bind('click', function() { //#btn1按钮函数
				var arr = $('#dg').datagrid('getChecked'); //返回复选框选中的所有行。
				//console.dir(arr[0].name);
				if(arr.length){//选中
					var str = '';
					for(var i = 0;i < arr.length;i++){
						str += arr[i].name+'：'+arr[i].authority+'<br>';
					}
					$('#dg1').css('display','block');
					$('#dg1 label').html(str);
					$('#auth-combobox').combobox({
						url : 'Data/auth.json',
						valueField : 'id',
						textField : 'text'
					});
					$('#dg1').dialog({
						title : '修改权限',
						buttons : [ {
							text : '确定',
							iconCls : 'icon-ok',
							handler : function() {//确认框
								$('#dg1').dialog('close');
								$.messager.confirm('Confirm','确认修改么？', function(r) {
									if (r) {
										$.messager.show({
											title : '成功',
											msg : '修改成功',
											timeout : 5000,
											showType : 'slide'
										});
										}else{
											$.messager.show({
												title : '取消',
												msg : '取消修改',
												timeout : 5000,
												showType : 'slide'
											});
										}
									});
							}
						}, {
							text : '取消',
							iconCls : 'icon-no',
							handler : function() {
								$('#dg1').dialog('close');
								$.messager.show({
									title : '取消',
									msg : '取消修改',
									timeout : 5000,
									showType : 'slide'
								});
							}
						} ],
						modal : true
					});
				}else{//不选中
					$('#dg2').css('display','block');
					$('#dg2').dialog({
						title : '提示',
						iconCls : 'icon-tip',
						draggable : false, //是否可以拖拽
						modal : true,
						buttons : [{
							text : '关闭',
							handler : function(){
								$('#dg2').dialog('close');
							}
						}]
					});
				}
			});
		});
		function help(){
			$('#dg3').css('display','block');
			$('#dg3').dialog({
				title : '帮助',
				draggable : false, //是否可以拖拽
				buttons : [{
					text : '关闭',
					iconCls : 'icon-no',
					handler : function(){
						$('#dg3').dialog('close');
					}
				}],
				modal : true
			});
		}
	</script>
</body>
</html>